<template>
  <div class="drag-control">
    <div class="control-items" id="bar-background" ref="bar-background"></div>
    <div class="control-items" id="move-background" ref="move-background"></div>
    <div class="control-items" id="time-tick" ref="time-tick">
      <span v-for="item in timeTicks">{{item.getTime()}}
        <!--<br>&nbsp;&nbsp;{{item.getDate()}}-->
      </span>
    </div>
    <div class="control-items" id="move-circle" v-dragged="onDragged" ref="move-circle"></div>
    <div class="control-items" id="upper-text" ref="upper-text" v-if="countWidth>0">
      <!--{{upperText.getDate()}}-->
      <!--<br>-->
      {{upperText.getTime()}}
    </div>
  </div>
</template>

<script>
  import config from '../../../myconf';
  import eventBus from '../../../util/event-bus';
  import DateTimeHelper from '../../../util/datetime-helper'
  import {mapState, mapMutations, mapGetters} from 'vuex'

  export default {
    name: 'drag-control',
    data() {
      return {
        countWidth: 0,
        maxWidth: 990,
        hourCount: 24,     //总时数
        dragging: false,   //是否有拖拽
        start_time: {},
        end_time: {},
        curHour: 0,
        curVal: 0,
      }
    },
    mounted(){
      this.$nextTick(() => {
        this.start_time = {
          year: this.single_time.year,
          month: this.single_time.month,
          day: this.single_time.day,
          hour: 0,
          minute: 0
        };
        this.end_time = {
          year: this.single_time.year,
          month: this.single_time.month,
          day: this.single_time.day,
          hour: 24,
          minute: 0
        };
        eventBus.$on("autoMovingInterval", (props) => {
          this.autoMoving({val: props.val, index: props.index});
        });
      });

      eventBus.$on("updateHistoryAxis", () => {
        this.updateAxisNum({
          hour: this.curHour,
          index: this.curVal
        })
      });
    },
    computed: {
      ...mapGetters(['single_time','speed']),
      timeTicks() {
        let timeData = [];
        let duration = DateTimeHelper.getDuration(this.start_time, this.end_time);    //分钟数
        this.hourCount = duration / 60;
        let elapse = duration / 12;
        let arr = [];
        for (let i = 0; i <= 12; i++) {
          let item = DateTimeHelper.addTime(this.start_time, elapse * i);
          arr.push(item);
          //this.timeTicks = arr;
        }
        return arr;
      },
      upperText() {
        return DateTimeHelper.addTime(this.start_time, DateTimeHelper.getDuration(this.start_time, this.end_time) * this.countWidth / this.maxWidth);
      }
    },
    methods: {
      ...mapMutations(['updateAxisNum']),
      onDragged({el, deltaX, deltaY, offsetX, offsetY, clientX, clientY, first, last}) {
        if (el.id !== 'move-circle') return;

        if (first) {  // 开始拖拽
          eventBus.$emit("DragStart");
          this.dragging = true;
          return;
        }
        if (last) {  // 停止拖拽
          let curDuration = DateTimeHelper.getDuration(this.start_time, this.upperText);   //间隔总分钟数

          let curHourIndex = parseInt(curDuration / 60);
          let curSeqIndex = Math.ceil(this.upperText.minute) * 10;   // 计算得每分钟10段(10seq)
          this.updateAxisNum({
            hour: curHourIndex,
            index: curSeqIndex
          });
          eventBus.$emit("DragStop", curHourIndex, curSeqIndex);     // 拖拽停止,发送当前小时

//          //加个timeout;解决滚动条回跳的bug
          setTimeout(() => {
            this.dragging = false;
          }, 300);
          return;
        }
        let l = +window.getComputedStyle(el)['left'].slice(0, -2) || 0;

        this.countWidth = l + deltaX;
        if (this.countWidth > this.maxWidth) {
          this.countWidth = this.maxWidth;
        }
        if (this.countWidth < 0) {
          this.countWidth = 0;
        }

        el.style.left = this.countWidth + 'px';

        this.$refs['move-background'].style.width = this.countWidth + 'px';
        this.$refs['upper-text'].style.left = this.countWidth + 'px';
        //el.style.top = t + deltaY + 'px';

      },
      autoMoving(props){
        const {val, index} = props;
        this.curHour = index;
        this.curVal = val;

        if (this.dragging) return;
        let circle = document.getElementById('move-circle');
        let upperText = document.getElementById('upper-text');
        let moveBg = document.getElementById('move-background');

        this.countWidth = (val + index * 600) / (600 * this.hourCount) * this.maxWidth;

        if (circle) circle.style.left = this.countWidth + 'px';
        if (upperText) upperText.style.left = this.countWidth + 'px';
        if (moveBg) moveBg.style.width = this.countWidth + 'px';

//        if (this.countWidth === this.maxWidth) {
//          eventBus.$emit("historyFinish");   //播放结束
//        }
      },
    },
    watch: {
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  @import "../../../../static/common/common";

  .drag-control {
    position: relative;
    left: 25px;
    bottom: 0;
    .control-items {
      position: absolute;
    }

    #bar-background {
      width: 990px;
      background-color: transparent;
      height: 6px;
      top: -10px;
      left: 10px;
      border: 1px solid $color-border;
      border-radius: 3px;
    }

    #move-background {
      width: 0;
      background-color: #c1e8fe;
      height: 6px;
      top: -9px;
      left: 10px;
      border-radius: 3px 0 0 3px;
    }

    #time-tick {
      width: 1140px;
      top: 10px;
      left: 0;
      border-radius: 3px 0 0 3px;
      text-align: left;
      span {
        display: inline-block;
        width: 82.3px;
        color: $font-color-normal;
        font-size: 13px;
        user-select: none;
        /*position: relative;
        left: -10px;*/

      }
    }

    #move-circle {
      width: 20px;
      height: 20px;
      background-color: $font-color-normal;
      top: -16px;
      left: 0;
      border-radius: 10px;
      cursor: col-resize;
    }

    #upper-text {
      height: 40px;
      width: 60px;
      top: -58px;
      font-size: 16px;
      text-align: center;
      margin-left: -18px;
      border-radius: 10px;
      color: $color-border;
    }
  }
</style>
